<template>
    <div class="details">
        <div class="top">
            <img src="../../assets/images/qr.png" alt="" @click="goback">
            <p>{{$t("common.tixianxiang")}}</p>
        </div>
        <div class="content">
            <div class="div1">
                <p>{{$t("common.shuliang")}}</p>
            </div>
            <div class="div2">
                <p>{{detail.quantity}}<span>USDT</span></p>
            </div>
            <div class="div3">
                <p v-if="detail.state"><img src="../../assets/images/xq.png" alt="">{{ filterState(detail.state) }}</p>
            </div>
        </div>
        <div class="bottom">
            <div class="bottomb">
                <p class="p1">{{$t("common.tixianzhanghu")}}</p>
                <p class="p2">{{$t("common.zijinzhanghu")}}</p>
            </div>
            <div class="bottomb">
                <p class="p1">{{$t("common.zhuanzhangwang")}}</p>
                <p class="p2">{{detail.publicChain == '1' ? 'Ethereum' : 'Tron'}}</p>
            </div>
            <div class="bottomc">
                <p class="p1">{{$t("common.dizhi")}}</p>
                <p class="p2">{{detail.arrivalAddress}}</p>
                <img src="../../assets/images/xq2.png" alt="" @click="copyLinka(detail.arrivalAddress)">
            </div>
            <div class="bottomd" v-if="detail.transactionHash">
                <p class="p1">{{$t("common.jiaoyi")}}</p>
                <p class="p2">{{detail.transactionHash}}</p>
                <img src="../../assets/images/xq2.png" alt="" @click="copyLinkb(detail.transactionHash)">
            </div>
            <div class="bottomb">
                <p class="p1">{{$t("common.wangluoshouxu")}}</p>
                <p class="p2">{{detail.serviceCharge}} USDT</p>
            </div>
            <div class="bottomb">
                <p class="p1">{{$t("common.riqi")}}</p>
                <p class="p2">{{detail.createTime}}</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            zid:'',
            detail:{},
            stateList:[],
            // fuzhicheng: this.$t('common.fuzhicheng'),
            // shibai: this.$t('common.fuzhishi'),
        }
    },
    async activated(){
        this.detail = {}
        this.stateList = await this.$getDict("withdrawal_state");
        this.zid = this.$route.query.zid
        this.getInfo()
    },
    methods:{
        async getInfo() {
            const ret = await this.$http({
                url: `/wallet/withdrawalrecord/app/${this.zid}`,
                method: "get",
            });
            if (ret.data.code === 0) {
                //
                this.detail = ret.data.data
            }
        },
        filterState(val) {
            console.log(val);
            return this.stateList.length&&this.stateList.find((v) => v.value == val).description;
        },
        copyLinka(val) { // 复制链接  val 就是你需要复制的链接
          this.$copyText(val).then(() => {
            this.$toast(this.$t('common.fuzhicheng'))
          }, () => {
            this.$toast(this.$t('common.fuzhishi'))
          })
        },
        copyLinkb(val) { // 复制链接  val 就是你需要复制的链接
          this.$copyText(val).then(() => {
            this.$toast(this.$t('common.fuzhicheng'))
          }, () => {
            this.$toast(this.$t('common.fuzhishi'))
          })
        },
        goback(){
            localStorage.setItem("ls",1);
            this.$router.go('-1')
        },
    }
}
</script>

<style scoped lang="scss">
.details{
    margin: 0;
    padding: 0;
    .top{
        width: 100vw;
        height: 11.73vw;
        background-color: #090A1B;
        color: rgba(255, 255, 255, 100);
        font-size: 4.8vw;
        //font-family: Microsoft Yahei;
        p{
            position: relative;
            bottom: 3.2vw;
        }
        img{
            position: relative;
            right: 44.8vw;
            top: 3.2vw;
            width: 5.3vw;
            height: 5.3vw;
            z-index: 100;
        }
    }
    .content{
        height: 49.33vw;
        background-color: #090A1B;
        border-bottom: 1px solid rgba(51, 53, 64, 100);
        .div1{
            height: 16.26vw;
            p{
                position: relative;
                top: 10.66vw;
                color: rgba(135, 139, 151, 100);
                font-size: 3.73vw;
                font-family: PingFangSC-regular;
            }
        }
        .div2{
            height: 10.66vw;
            display: flex;
            justify-content: center;
            p{
                color: rgba(255, 255, 255, 100);
                font-size: 6.4vw;
                text-align: left;
                font-family: PingFangSC-semiBold;
                position: relative;
                top: 2.4vw;
                font-weight: 600;
                span{
                    color: rgba(255, 255, 255, 100);
                    font-size: 3.73vw;
                    font-family: PingFangSC-regular;
                    position: relative;
                    left: 2.6vw;
                }
            }
        }
        .div3{
            height: 8.26vw;
            p{
                position: relative;
                top: 2.66vw;
                color: rgba(94, 186, 137, 100);
                font-size: 3.73vw;
                font-family: PingFangSC-regular;
                img{
                    position: relative;
                    right: 2.13vw;
                    top: 0.96vw;
                    height: 4.26vw;
                    width: 4.26vw;
                }
            }
        }
    }
    .bottom{
        height: 155vw;
        background-color: #090A1B;
        .bottoma{
            height: 10.93vw;
            display: flex;
            justify-content: space-between;
            padding: 0 4.26vw;
            .p1{
                font-size: 3.2vw;
                position: relative;
                top: 6.4vw;
                font-family: PingFangSC-regular;
                color: rgba(135, 139, 151, 100);
                font-size: 3.2vw;
                letter-spacing: 0.2vw;
            }
            .p2{
                font-size: 3.2vw;
                position: relative;
                top: 6.4vw;
                font-family: PingFangSC-regular;
                color: rgba(214, 214, 214, 100);
                font-size: 3.2vw;
                letter-spacing: 0.2vw;
            }
        }
        .bottomb{
            height: 8.8vw;
            display: flex;
            justify-content: space-between;
            padding: 0 4.26vw;
            .p1{
                font-size: 3.2vw;
                position: relative;
                top: 4.26vw;
                font-family: PingFangSC-regular;
                color: rgba(135, 139, 151, 100);
                font-size: 3.2vw;
                letter-spacing: 0.2vw;
            }
            .p2{
                font-size: 3.2vw;
                position: relative;
                top: 4.26vw;
                font-family: PingFangSC-regular;
                color: rgba(214, 214, 214, 100);
                font-size: 3.2vw;
                letter-spacing: 0.2vw;
                font-weight: 600;
            }
        }
        .bottomc{
            height: 13.86vw;
            display: flex;
            justify-content: space-between;
            padding: 0 4.26vw;
            .p1{
                position: relative;
                top: 6.4vw;
                color: rgba(135, 139, 151, 100);
                font-size: 3.2vw;
                font-family: PingFangSC-regular;
                letter-spacing: 0.2vw;
            }
            .p2{
                width: 55.73vw;
                height: 10.4vw;
                color: rgba(214, 214, 214, 100);
                font-size: 3.2vw;
                font-family: PingFangSC-regular;
                word-wrap: break-word;
                text-align: right;
                line-height: 5.33vw;
                position: relative;
                left: 10.13vw;
                top: 3.46vw;
                letter-spacing: 0.2vw;
                font-weight: 600;
            }
            img{
                width: 4.8vw;
                height: 4.8vw;
                position: relative;
                top: 6.4vw;
            }  
        }
        .bottomd{
            height: 22.66vw;
            display: flex;
            justify-content: space-between;
            padding: 0 4.26vw;
            .p1{
                position: relative;
                top: 9.33vw;
                color: rgba(135, 139, 151, 100);
                font-size: 3.2vw;
                font-family: PingFangSC-regular;
                letter-spacing: 0.2vw;
            }
            .p2{
                width: 58.93vw;
                height: 16.26vw;
                color: rgba(214, 214, 214, 100);
                font-size: 3.46vw;
                font-family: PingFangSC-regular;
                word-wrap: break-word;
                text-align: right;
                line-height: 5.86vw;
                position: relative;
                top: 6.4vw;
                left: 5.33vw;
                text-decoration: underline;
                letter-spacing: 0.2vw;
            }
            img{
                width: 4.8vw;
                height: 4.8vw;
                position: relative;
                top: 9.33vw;
            }
        }
    }
}

</style>